<template>
  <template v-if="setFunc || getFunc">
    <!--  <el-input
      v-bind="$attrs"
      ref="oldInputRef"
      style="display: none"
    ></el-input> -->
    <el-input
      :maxlength="maxLength ?? 25"
      v-bind="handledAttr"
      v-model="inputValue"
    >
      <template #prefix>
        <slot name="prefix"></slot>
      </template>
      <template #suffix>
        <slot name="suffix"></slot>
      </template>
      <template #prepend v-if="prepend">
        <slot name="prepend"></slot>
      </template>
      <template #append v-if="append">
        <slot name="append"></slot>
      </template>
    </el-input>
  </template>
  <el-input :maxlength="maxLength ?? 25" v-bind="$attrs" v-else>
    <template #prefix>
      <slot name="prefix"></slot>
    </template>
    <template #suffix>
      <slot name="suffix"></slot>
    </template>
    <template #prepend v-if="prepend">
      <slot name="prepend"></slot>
    </template>
    <template #append v-if="append">
      <slot name="append"></slot>
    </template>
  </el-input>
</template>

<script>
export default {
  inheritAttrs: false,
  props: ["append", "prepend", "maxLength", "setFunc", "getFunc"],
  data() {
    return {
      handledAttr: {},
      bindAttr: {}
    }
  },
  created() {
    this.handledAttr = { ...this.$attrs, v_model: undefined, _value: undefined }
  },
  computed: {
    inputValue: {
      get: (ctx) => {
        let nv = ""
        if (ctx.getFunc instanceof Function) nv = ctx.getFunc(ctx)
        console.log("nv", nv)
        return nv
      },
      set: function (val) {
        if (this.setFunc instanceof Function) {
          this.setFunc(val)
        } else {
        }
        return true
      }
    }
  }
}
</script>
